<!DOCTYPE html>
<html lang="en">
<head>


    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <title></title>
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <link href="../bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../bootstrap-select-1.13.14/dist/css/bootstrap-select.css">
    <link rel="stylesheet" href="../toastr/toastr.min.css">
    <link rel="stylesheet" href="../bootstrapvalidator-aae9288/dist/css/bootstrapValidator.css">
    <title>人员管理</title>

</head>
<body>
            <!--toolbar-添加和批量删除选项按钮-->
        <div class="row" id="tableToolBar">
            <button type="button" class="btn btn-info" id="toolbarAdd">添加人员</button>
            <button type="button" class="btn btn-danger" id="deleteMore">批量删除</button>
        </div>
        <!--删除的模态框-->
        <div class="modal fade" id="ModalForDelete" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            删除
                        </h4>
                    </div>
                    <div class="modal-body" id="TipForDelete">
                        确定要删除么?         </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default"
                                data-dismiss="modal">关闭            </button>
                        <button type="button" class="btn btn-primary" id="ComfirmForDelecte">
                            提交更改
                        </button>
                    </div>
                </div><!-- /.modal-content --></div>
        </div>

        <!--添加和更新的模态框-->
        <div class="modal fade" id="ModalForAdd" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabelForAdd">
                            添加房间
                        </h4>
                    </div>
                    <div class="modal-body" id="TipForAdd">
                        <div class="form-group">
                            <label for="uInfo_name">用户名</label>
                            <input type="text" class="form-control" id="uInfo_name" placeholder="请输入用户名">
                        </div>
                        <div class="form-group">
                            <label for="uInfo_familyname">姓名</label>
                            <input type="text" class="form-control" id="uInfo_familyname" placeholder="请输入姓名">
                        </div>
                        <div class="form-group col-md-6">
                            <label>性别</label>
                            <select id ="uInfo_gender" class="selectpicker" data-live-search="true"  data-width="120px">
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                        </div>
                        <div class="form-group col-md-6" >
                            <label>电话</label>
                            <input type="text" class="form-control" id="uInfo_phone" placeholder="请输入电话">
                        </div>

                    </div>
                    <div class="modal-footer" style="margin-top:50px">
                        <button type="button" class="btn btn-default"
                                data-dismiss="modal">关闭            </button>
                        <button type="button" class="btn btn-primary" id="ConfirmForAdd">
                            提交
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <table id="data-table"></table>

    <script src="../jquery/jquery-3.5.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../bootstrap-select-1.13.14/dist/js/bootstrap-select.js"></script>
    <script src="../bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script src="../toastr/toastr.min.js"></script>
    <script src="../jquery-validation/jquery.validate.js"></script>
    <script src="../jquery-validation/messages_zh.js"></script>
    <script src="../bootstrapvalidator-aae9288/dist/js/bootstrapValidator.js"></script>
    <script src="../bootstrapvalidator-aae9288/dist/js/language/zh_CN.js"></script>
    <script>
        var uInfo_names=[];
        var isupdate="";//全局变量区分add和update
        $(document).ready(function () {
            initTable();
            function initTable() {
                //让bookstraptable销毁
                $("#data-table").bootstrapTable("destroy");
                $("#data-table").bootstrapTable({
                    url: "../userinfo/selectAll",
                    method: 'post', //请求方式（*）
                    toolbar: '#toolbarAdd,#deleteMore',            //工具按钮用哪个容器
                    striped: true, //是否显示行间隔色
                    cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                    pagination: true, //是否显示分页（*）
                    sortable: true, //是否启用排序
                    sortOrder: "asc", //排序方式
                    sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
                    pageNumber: 1, //初始化加载第一页，默认第一页,并记录
                    pageSize: 5, //每页的记录行数（*）
                    pageList: [10, 20, 50, 100], //可供选择的每页的行数（*）
                    search: true, //是否显示表格搜索,模糊查询
                    strictSearch: false,//精确查询
                    // silent : true,// 刷新事件必须设置
                    showColumns: true, //是否显示所有的列（选择显示的列）
                    showRefresh: true, //是否显示刷新按钮
                    minimumCountColumns: 2, //最少允许的列数
                    clickToSelect: true, //是否启用点击选中行
                    //height: 1000,                      //表格高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                    uniqueId: "uInfo_id", //每一行的唯一标识，一般为主键列
                    showToggle: false, //是否显示详细视图和列表视图的切换按钮
                    cardView: false, //是否显示详细视图
                    detailView: false, //是否显示父子表
                    clickToSelect: true,    //是否启用点击选中行
                    // queryParams: queryParams,
                    columns: [

                        {
                            checkbox: true,

                        },
                        {
                            field: 'uinfo_id',//JSon数据中的相应的key
                            title: '编号',//表头信息
                            sortable: true,

                            align: 'center',
                            valign: 'middle',
                        },
                        {
                            field: 'uinfo_familyname',//JSon数据中的相应的key
                            title: '管理员姓名',//表头信息
                            sortable: true,

                            align: 'center',
                            valign: 'middle',
                        },
                        {
                            field: 'uinfo_phone',
                            title: '手机号',
                            sortable: true,

                            align: 'center',
                            valign: 'middle',

                        },
                        {
                            field: 'uinfo_gender',
                            title: '姓名',
                            sortable: true,

                            align: 'center',
                            valign: 'middle',
                        },
                        {
                            field: 'uinfo_name',
                            title: '账号名',
                            align: 'center',
                            sortable: true,
                            valign: 'middle',
                        },
                        {
                            field: 'u_pwd',
                            title: '密码',
                            align: 'center',
                            sortable: true,
                            valign: 'middle',
                        },
                        {
                            field: 'r_name',
                            title: '角色',
                            align: 'center',
                            sortable: true,
                            valign: 'middle',
                        },
                        {
                            title: '操作',
                            align: 'center',
                            valign: 'middle',
                            width: 200,
                            //events: operateEvents,
                            formatter: function (e,value, row, index) {
                                return "<button class='btn btn-info updateGuest'><i class='fa fa-pencil-square-o' aria-hidden='true'></i> 编辑</button> <button class='btn btn-danger deleteGuest'> <i class='fa fa-trash' aria-hidden='true'></i> 删除</button>"
                                    ;
                            }
                        }
                    ],
                    onLoadSuccess: function (res) {
                        console.log(res);
                        //复选框的居中样式
                        $(".bs-checkbox").css({"text-align": 'center', "vertical-align": "middle"});
                    }, onLoadError: function (statusCode) {
                        return "加载失败了"
                    }, formatLoadingMessage: function () {
                        //正在加载
                        return "拼命加载中...";
                    }, formatNoMatches: function () {
                        //没有匹配的结果
                        return '无符合条件的记录';
                    }
                });
            }


            //添加模态框
            $("#toolbarAdd").click(function () {
                $("#myModalLabelForAdd").text("添加人员");
                isupdate = "";
                $("#ModalForAdd").modal("show");

            });

            //删除模态框
            $("#ComfirmForDelecte").click(function () {

                $.ajax({
                    url: "../userinfo/deleteUserInfo",
                    type: "get",
                    dataType: "json",
                    //序列化,能够传递数组给服务器
                    traditional: true,
                    data: {
                        uInfo_names: uInfo_names
                    },
                    success: function (rs) {
                        var errorCode = rs.errorCode;
                        if (errorCode == 0) {
                            //模态框成功后消失
                            $("#ModalForDelete").modal("hide");
                            //删除成功后刷新
                            initTable();
                            //刷新后出一个提示框
                            toastr.success(rs.status);
                        } else {
                            toastr.error(rs.status);
                            $("#ModalForDelete").modal("hide");

                        }

                    }
                })


            });

            // 获取表格所有已经勾选的行数据，为一个对象数组---做批量删除
            $("#deleteMore").click(function () {
                var selects = $('#data-table').bootstrapTable('getSelections');
                for (var i = 0; i < selects.length; i++) {
                    uInfo_names[i] = selects[i].uInfo_name;
                }
                $("#ModalForDelete").modal("show");

            });

            //添加和更新的提交
            $("#ConfirmForAdd").click(function () {
                if (isupdate != "") {
                    $.ajax({
                        type: "post",
                        url: "../userinfo/updatetUserinfo",
                        async: true,
                        dataType: "json",
                        data: {
                            uInfo_name: $("#uInfo_name").val(),
                            uInfo_familyname: $("#uInfo_familyname").val(),
                            uInfo_gender: $("#uInfo_gender").val(),
                            uInfo_phone: $("#uInfo_phone").val()

                        },
                        success: function (rs) {
                            var errorCode = rs.errorCode;
                            if (errorCode == 0) {
                                //模态框成功后消失
                                $("#ModalForAdd").modal("hide");
                                //成功后刷新
                                initTable();
                                //刷新后出一个提示框
                                toastr.success(rs.status);

                            } else {
                                toastr.error(rs.status);
                            }
                        }
                    })
                } else {
                    $.ajax({
                        type: "post",
                        url: "../userinfo/insertUserinfo",
                        async: true,
                        dataType: "json",
                        data: {
                            uInfo_name: $("#uInfo_name").val(),
                            uInfo_familyname: $("#uInfo_familyname").val(),
                            uInfo_gender: $("#uInfo_gender").val(),
                            uInfo_phone: $("#uInfo_phone").val()

                        },
                        success: function (rs) {
                            var errorCode = rs.errorCode;
                            if (errorCode == 0) {
                                //模态框成功后消失
                                $("#ModalForAdd").modal("hide");
                                //成功后刷新
                                initTable();
                                //刷新后出一个提示框
                                toastr.success(rs.status);

                            } else {
                                toastr.error(rs.status);
                            }
                        }
                    })
                }
            });

            //当模态框关闭时，清空模态框数据
            $('#ModalForAdd').on('hidden.bs.modal', function () {
                clearModelData();
            })
            //清空模态框数据
            function clearModelData() {
                $("#uInfo_name").val("");
                $("#uInfo_familyname").val("");
                $("#uInfo_gender").val("");
                $("#uInfo_phone").val("");


            }
            $('#ModalForgotohome').on('hidden.bs.modal', function () {
                clearModelData();
            })



        });//jq完=================================================================================================
        window.operateEvents = {
            'click .updateuserinfo': function (e, value, row, index) {
                $("#myModalLabelForAdd").text("编辑");
                isupdate= row.uInfo_name;//一加载的时候就判断room_id是否为空,不为空就是更新,空的就是添加
                $("#ModalForAdd").modal("show");
                $.ajax({
                    url: "../userinfo/selectUserinfobyName",
                    type: "get",
                    dataType: "json",
                    data: {
                        uInfo_name: row.uInfo_name
                    },
                    success: function (res) {
                        if (res.errorCode==0) {
                            $("#uInfo_name").val(res.object.uInfo_name);
                            $("#uInfo_familyname").val(res.object.uInfo_familyname);
                            $("#uInfo_gender").val(res.object.uInfo_gender);
                            $("#uInfo_phone").val(res.object.uInfo_phone);

                        }

                    }

                });
            },
            'click .deleteuserinfo': function (e, value, row, index) {
                //一点击删除按钮就显示模态框
                $("#TipForDelete").html("确定要删除"+row.uInfo_name+"么?")
                uInfo_names[0]=row.uInfo_name;
                $("#ModalForDelete").modal("show");
            }

        };




    </script>


</body>
</html>